<template>
    <div class="custom-tree-container">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-button>导入</el-button>
        <el-button>下载</el-button>
        <div class="block">
            <el-tree
                :data="data"
                :props="props"
                show-checkbox
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                :render-content="renderContent"
                ref="tree">
            </el-tree>
        </div>
        <!-- 编辑 添加部门弹框 -->
        <el-dialog :title="isEdit?'编辑部门':'添加部门'" :visible.sync="dialogVisible" width="40%">
            <el-form :model="dep" ref="depForm" label-width="150px" size="small">
                <el-form-item label="部门名称">
                    <el-input v-model="dep.name" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="部门描述">
                    <el-input v-model="dep.description" style="width: 250px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  import {fetchList, add, update, del} from '@/api/department'
  export default {
    data() {
      return {
        props: {
          label: 'name',
          children: 'children',
          isLeaf: 'leaf'
        },
        data: [],
        filterText: '',
        isEdit: false,
        dialogVisible: false,
        dep: {
            id: '',
            name: '',
            pid: '',
            description: '',
            level: 0
        }
      }
    },
    created() {
        this.getList();
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
        // 获取整个组织树
        getList() {
            fetchList({}).then(response => {
                let data = response.data;
                this.data = data;
            });
        },
        // 过滤
        filterNode(value, data) {
            if (!value) {
                return true;
            }
            return data.name.indexOf(value) != -1;
        },
        // 删除一个节点
        remove(node, data) {
            this.$confirm('是否删除该节点?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let id = data.id;
                del(id).then(resp => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消修改'
                });
            }); 
        },
        // 编辑节点
        edit(data) {
            this.dep.id = data.id;
            this.dep.description = data.description;
            this.dep.name = data.name;
            this.isEdit = true;
            this.dialogVisible = true;
        },
        // 添加一个节点
        append(data) {
            this.dep.name = '';
            this.dep.description = '';
            this.dep.pid = data.id;
            this.dep.level = data.level + 1;
            this.isEdit = false;
            this.dialogVisible = true;
        },
        // 确认添加/修改
        handleDialogConfirm() {
            this.dialogVisible = false;
            if (this.isEdit) {
                update(this.dep).then(resp => {
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                    this.getList();
                })
            } else {
                add(this.dep).then(resp=> {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.getList();
                })
            }
        },
        // 渲染
        renderContent(h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                    <span>{node.label}</span>
                    <span>
                        <el-button size="mini" type="text" on-click={ () => this.edit(data) }>编辑</el-button>
                        <el-button size="mini" type="text" on-click={ () => this.append(data) }>添加</el-button>
                        <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
                    </span>
                </span>
            );
        }
    }
  };
</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>